<template>
  <el-header class="header">
    <div class="header-left">
      <img :src="[logo?require('../assets/vite-logo.svg'):require('../assets/logo.png')]" @click="handleFolded">
      <span>尚品汇后台管理系统</span>
      <i @click="handleFolded" class="iconfont icon-zhedie2"></i>
    </div>
    <div class="header-right">
      <el-dropdown trigger="click">
        <img src="../assets/dzq.jpg">
        <span><el-icon class="el-icon--right"><arrow-down/></el-icon></span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item>Action 4</el-dropdown-item>
            <el-dropdown-item divided>退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>
<script>
import emitter from "../utils/bus";

export default {
  name: "Header",
  data() {
    return {
      // 控制头部图标的切换
      logo: true
    }
  },
  methods: {
    handleFolded() {
      // 折叠侧边栏
      emitter.emit('doCollapse')
      this.logo = !this.logo
      // 折叠main区域
      emitter.emit('doCollapse2')
    }
  }
}
</script>

<style scoped>
.header {
  background-color: rgb(48, 65, 86);
  position: fixed;
  /*z-index: 99999;*/
  width: 100%;
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  color: #fff;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left img {
  height: 50px;
  width: 50px;
}

.header-right {
  margin-top: 10px;
}

.header-right img {
  height: 40px;
  width: 40px;
  border-radius: 5px;
}

</style>